<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关系选择器</title>
		<style type="text/css">
			div>a {color: red;}
			p+span{text-decoration: line-through;}
			p~span{color: green;}
		</style>
	</head>
	<body>
		<div>
			<a href="#">子元素</a>
			<p>
				<a href="">子孙元素</a>
			</p>
			<span>靠近p的第一个兄弟元素</span>
			<span>靠近p的第2个兄弟元素</span>
			<span>靠近p的第3个兄弟元素</span>
		</div>
	</body>
</html>